import React from 'react';
import { useAiCorrectorStore } from '@/stores/useAiCorrectorStore';
import { ComplianceType } from '@/types/work';
import { IssueType, IssueSeverity } from '@/types/aiCorrector';

const FilterPanel: React.FC = () => {
  const { state, updateFilters } = useAiCorrectorStore();
  
  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    updateFilters({ searchTerm: e.target.value });
  };
  
  const handleTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    updateFilters({ type: e.target.value as ComplianceType | 'all' });
  };
  
  const handleIssueTypeChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    updateFilters({ issueType: e.target.value as IssueType | 'all' });
  };
  
  const handleSeverityChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    updateFilters({ severity: e.target.value as IssueSeverity | 'all' });
  };
  
  return (
    <div className="bg-card rounded-lg shadow p-6 mb-6">
      <h2 className="text-lg font-semibold text-foreground mb-4">筛选条件</h2>
      
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {/* 搜索框 */}
        <div>
          <label htmlFor="search" className="block text-sm font-medium text-foreground mb-1">
            关键词搜索
          </label>
          <input
            type="text"
            id="search"
            placeholder="搜索标题、描述..."
            className="w-full px-3 py-2 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
            value={state.filters.searchTerm}
            onChange={handleSearchChange}
          />
        </div>
        
        {/* 检查项类型筛选 */}
        <div>
          <label htmlFor="type-filter" className="block text-sm font-medium text-foreground mb-1">
            检查项类型
          </label>
          <select
            id="type-filter"
            className="w-full px-3 py-2 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
            value={state.filters.type}
            onChange={handleTypeChange}
          >
            <option value="all">所有类型</option>
            <option value={ComplianceType.RISK}>风险项</option>
            <option value={ComplianceType.GUARANTEE}>保障项</option>
          </select>
        </div>
        
        {/* 问题类型筛选 */}
        <div>
          <label htmlFor="issue-type-filter" className="block text-sm font-medium text-foreground mb-1">
            问题类型
          </label>
          <select
            id="issue-type-filter"
            className="w-full px-3 py-2 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
            value={state.filters.issueType}
            onChange={handleIssueTypeChange}
          >
            <option value="all">所有问题</option>
            <option value={IssueType.TYPO}>错别字</option>
            <option value={IssueType.SEMANTIC}>语义混乱</option>
            <option value={IssueType.RISK_LEVEL}>风险等级不合理</option>
            <option value={IssueType.COMPLIANCE_STATUS}>合规状态不合理</option>
          </select>
        </div>
        
        {/* 严重程度筛选 */}
        <div>
          <label htmlFor="severity-filter" className="block text-sm font-medium text-foreground mb-1">
            严重程度
          </label>
          <select
            id="severity-filter"
            className="w-full px-3 py-2 border border-input rounded-lg focus:outline-none focus:ring-2 focus:ring-ring"
            value={state.filters.severity}
            onChange={handleSeverityChange}
          >
            <option value="all">所有级别</option>
            <option value={IssueSeverity.HIGH}>高</option>
            <option value={IssueSeverity.MEDIUM}>中</option>
            <option value={IssueSeverity.LOW}>低</option>
          </select>
        </div>
      </div>
      
      {/* 筛选结果统计 */}
      <div className="mt-4 text-sm text-muted-foreground">
        当前筛选结果: {state.filteredItems.length} 个问题
      </div>
    </div>
  );
};

export default FilterPanel;
